import React, { useState, Fragment } from 'react'
import { NavLink } from 'react-router-dom'
import styled from 'styled-components'


const NavBarWrapper = styled.div`
 height: 100%;
 display: flex;
 /* justify-content: center; */
 /* align-items:center; */
 a {
  flex:1;
    display: flex;
  justify-content: center;
  align-items:center;
 }
 .active {
   color: red;
 }
`;

const navLinks = [
  {
    text: '首页',
    path: '/home',
    icon: ''
  },
  {
    text: '购物车页面',
    path: '/cart',
    icon: ''
  }
]

const NavBar = () => {
  const [state, setstate] = useState<any[]>(navLinks)
  return <NavBarWrapper>
    {
      state.map(item => {
        return <Fragment key={item.path}>
          <NavLink  to={item.path}>{item.text}</NavLink>
        </Fragment>

      })
    }
  </NavBarWrapper>
}

export default NavBar;
